<template>
    <view>
        <cu-custom :bgColor="globalData.bgColor" :isBack="true"><block slot="content"><text class="text-darkgrey">商品评价</text></block></cu-custom>
		<view class="search flex bg-white fixed padding-top-sm solid-bottom">
		    <view class="search-content round">
		        <text class="cuIcon-search padding-right-xs margin-left"></text>
		        <input type="text" placeholder="输入用户昵称全名搜索" v-model="inputKey" confirm-type="search"></input>
		    </view>
		    <view class="action">
		        <button class="cu-btn bg-blue round search-button margin-right-sm" @click="search">搜索</button>
		    </view>
		</view>
        <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
            <view >
                <view class="cu-list goods-list">
                    <view class="cu-item radius bg-white solid-bottom" v-for="data in dataList" :key="data.id">

                        <view class="cu-list menu-avatar flex justify-between padding-left padding-top align-center">
                            <view class="cu-avatar head-box round" :style="{'background-image':data.headimgUrl?'url('+data.headimgUrl+')':''}"></view>
                            <view class="content flex-sub padding-left padding-right text-sm">
                                <view class="text-darkgrey text-df">用户:{{data.nickName? data.nickName : '匿名'}}</view>
                                <view class="text-purple-grey">留言时间:{{data.createTime}}</view>
                            </view>
                        </view>
                        <view class="cu-list menu-avatar flex justify-between padding-left padding-bottom align-center">
                            <view class="cu-avatar img-box" :style="{'background-image':data.goodsSpu&&data.goodsSpu.picUrls?'url('+data.goodsSpu.picUrls[0]+')':''}"></view>
                            <view class="content flex-sub padding-left padding-right text-sm">
                                <view class="text-darkgrey text-df" >{{data.goodsSpu?data.goodsSpu.name:''}}</view>
                                <view class="text-purple-grey flex justify-between margin-top-xs">规格：{{data.specInfo}}</view>
                            </view>
                        </view>
                        <view class="padding-left padding-right text-sm padding-bottom-sm text-purple-grey">
							<view class="">
							    <text class="flex">订单号:{{data.orderNo}}</text>
							    <text class="flex">购买价格:{{data.salesPrice}}</text>
							    <text class="flex">购买数量:{{data.quantity}}</text>
							</view>
							<view class="flex justify-around text-darkgrey margin-top-sm margin-right">
							    <text class="">商品评分:{{data.goodsScore}}</text>
							    <text class="">服务评分:{{data.serviceScore}}</text>
							    <text class="">物流评分:{{data.logisticsScore}}</text>
							</view>
							<view class="margin-top-xs">买家留言:{{data.content ? data.content : '此人很懒，什么也没写'}}</view>
							<view  v-if="data.replyTime" class="  text-xl ">卖家回复:{{data.sellerReply}}</view>
							<view  v-if="data.replyTime" class="  text-xl ">回复时间:{{data.replyTime}}</view>
						</view>
						<view v-if="globalData.permissions['mall:goodsappraises:edit']&&!data.replyTime"   class="padding-left padding-right text-sm  padding-bottom-sm flex justify-end">
							<view class="cu-btn round bg-blue button-bg shadow-blur margin-right-sm" @tap="onReply(data)">立即回复</view>
                        </view>
                    </view>
                </view>
            </view>
        </mescroll-body>

        <!-- 回复评价弹框 -->
        <view class="cu-modal" :class="showModal?'show':''">
            <view class="cu-dialog bg-white">
                <view class="cu-bar bg-white justify-end">
                    <view class="content">回复</view>
                    <view class="action" @tap="showModal=false">
                        <text class="cuIcon-close text-red"></text>
                    </view>
                </view>
                <view class="padding bg-white solid-top solid-bottom" style="text-align: start;min-height: 200rpx;">
                    <input placeholder="请输入回复内容" type="text" name="sellerReply"
                           @input="replyForm.sellerReply=$event.target.value"
                           :value="replyForm.sellerReply"></input>
                </view>
                <view class="cu-bar bg-white justify-end">
                    <view class="action">
                        <button class="cu-btn line-green text-green" @tap="showModal=false">取消</button>
                        <button class="cu-btn bg-green margin-left" @tap="submitReply">确定</button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

    const app = getApp();
    import {getPage,putObj} from '@/api/mall/goodsappraises'

    export default {
        mixins: [MescrollMixin], // 使用mixin
        components: {},
        data() {
            return {
                showModal: false,
                replyForm:{
                    sellerReply:''
                },
                globalData: app.globalData,
                CustomBar: this.CustomBar,
                inputKey:'',
                mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
                downOption: {// 下拉刷新的配置(可选, 绝大部分情况无需配置)

                },
                // 上拉加载的配置(可选, 绝大部分情况无需配置)
                upOption: {
                    page: {
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        tip: '暂无相关数据'
                    }
                },
                // 列表数据
                dataList: []
            }
        },
        methods: {
            submitReply(){
                if(!this.replyForm.sellerReply){
                    uni.showToast({
                        title:'请输入回复内容',
                        icon:'none'
                    })
                    return;
                }
                putObj(this.replyForm).then(data => {
                    uni.showToast({
                        title:'回复成功'
                    });
                    this.mescroll.resetUpScroll();//刷新
                    this.showModal = false;
                }).catch(() => {
                    uni.showToast({
                        title:'回复失败，请重试'
                    });
                })
            },
            onReply(item){
                item.sellerReply = item.sellerReply?item.sellerReply:'';
                this.replyForm = item;
                this.showModal = true;
            },
            search (val) {
                this.mescroll.resetUpScroll();
            },
            /*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
            mescrollInit(mescroll) {
                this.mescroll = mescroll;
            },
            /*下拉刷新的回调, 有三种处理方式:*/
            downCallback(){
                this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
                this.mescroll.endSuccess()
            },
            /*上拉加载的回调*/
            upCallback(page) {
                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条
                let querySearch = '?current='+pageNum+'&size='+pageSize+'&descs=create_time';
                if(this.inputKey){
                    querySearch = querySearch + '&nickName='+this.inputKey
                }
                getPage(querySearch).then(response=>{
                    if(response.data){
                        // 接口返回的当前页数据列表 (数组)
                        let curPageData = response.data.records;
                        // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                        let curPageLen = curPageData.length;
                        // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
                        let totalSize = response.data.total;
                        //设置列表数据
                        if(page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
                        this.dataList = this.dataList.concat(curPageData); //追加新数据
                        // 请求成功,隐藏加载状态
                        this.mescroll.endBySize(curPageLen, totalSize);
                        setTimeout(()=>{
                            this.mescroll.endSuccess(curPageLen)
                        },20)

                    }
                });
            }
        }
    }
</script>

<style>
	.search{
		width: 100%;
		padding-bottom: 20rpx;
		position: fixed;
		z-index: 1024;
	}
	
	.search-content{
		background-color: #f5f5f5;
		line-height: 64upx;
		height: 64upx;
		font-size: 24upx;
		color: #333333;
		flex: 1;
		display: flex;
		align-items: center;
		margin: 0 30upx;
	}
	
	.search-content input{
		flex: 1;
		padding-right: 30upx;
		height: 64upx;
		line-height: 64upx;
		font-size: 26upx;
		background-color: transparent;
	}

	.search-button{
		padding: 10rpx 30rpx 10rpx 30rpx;
	}

	.goods-list{
		margin-top: 100rpx;
	}
	
	.head-box{
		
	}
	
	.img-box{
		width: 200rpx;
		height: 200rpx;
	}

	.cu-tag{
		margin: 20rpx 10rpx 0 -5rpx !important;
	}

    .text-to-long{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
</style>
